<template>
  <div class="hue-rotate">
    <p>原图：</p>
    <img :src="$withBase('/images/green-lantern.png')" />
    <p>效果图：</p>
    <img :src="$withBase('/images/green-lantern.png')" class="img" />
  </div>
</template>

<script>
export default {
  name: "hue-rotate",
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
};
</script>

<style scoped>
@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(1turn);
    -moz-filter: hue-rotate(1turn);
    -ms-filter: hue-rotate(1turn);
    filter: hue-rotate(1turn);
  }
}

.img {
  animation: hue-rotate 5s linear infinite;
}
</style>
